<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        img {
            display: block;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img alt="" src="../images/ldh.jpg" title="刘德华">

<script>
    // 修改元素属性 src
    // 1.获取元素
    var ldh = document.querySelector('#ldh');
    var zxy = document.querySelector('#zxy');
    var img = document.querySelector('img');

    // 2.注册事件, 处理程序
    ldh.onclick = function () {
        img.src = '../images/ldh.jpg';
        img.title = '刘德华';
    }

    zxy.onclick = function () {
        img.src = '../images/zxy.jpg';
        img.title = '张学友';
    }
</script>
</body>


</html>
